<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
      @closed="resetForm('form')"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="签到主题" prop="title">
          <el-input v-model.trim="form.title"></el-input>
        </el-form-item>
        <el-form-item label="应到人数">
          <el-input-number
            v-model="form.dueNum"
            :min="1"
            :max="1000"
            size="medium"
            label="应到人数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker
            v-model="form.sTime"
            type="date"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-date-picker
            v-model="form.eTime"
            type="date"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model.trim="form.addr"></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-button
      type="custom"
      v-preventReClick
      @click="submitForm('form')"
      style="margin-left: 100px"
      >保 存</el-button
    > -->
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      title: '新增',
      dialogVisible: false,
      form: {
        title: '', //签到主题
        resId: '', //资源id
        resType: '1', //资源类型1-章节，2-其他扩展
        actNum: '', //实到人数
        dueNum: '1', //应到人数
        sTime: '', //开始签到时间 2023-04-13 9:00
        eTime: '', //截止截止时间 2023-04-13 9:30
        addr: '', //地址
      },
      rules: {
        title: [{ required: true, message: '请输入签到主题', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.$bus.$on('showSignIn', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showSignIn')
  },
  methods: {
    //显示弹窗
    init(row) {
      this.loading = true
      setTimeout(() => {
        if (row.hasOwnProperty('id')) {
          this.form = { ...this.form, ...row }
          this.$set(this.form, 'id', row.id)
        } else {
          this.form = this.$options.data().form
          this.$delete(this.form, 'id')
        }
        this.title = row.hasOwnProperty('id') ? '编辑' : '新增'
        this.form.resId = row.chapterId
        this.loading = false
      }, 300)
    },
    submitForm(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          let dispatchType =
            this.title == '新增' ? 'addEduLessonPlan' : 'updateEduLessonPlan'
          await this.$store.dispatch(dispatchType, this.form)
          this.successMsg('操作成功')
          this.$bus.$emit('refreshLessonPlanList')
          this.dialogVisible = false
        }
      })
    },

    resetForm(form) {
      this.$refs[form].resetFields()
    },
  },
}
</script>